<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
// 引入swiper样式（按需导入）
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/navigation' // 轮播图两边的左右箭头
import 'swiper/css/scrollbar' // 轮播图的滚动条， 轮播图里一般不怎么会使用到滚动条，如果有用到的话import导入就行
// 引入swiper核心和所需模块
import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'
import { ref} from "vue";
import {getSwiper} from "@/axios/https.js";
const navigation = ref({
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
});
// 在modules加入要使用的模块
const modules = [Autoplay, Pagination, Navigation, Scrollbar]



const imgUrl = ref([]);
getSwiper().then(res=>{
    imgUrl.value=res.data.data;
    console.log(imgUrl)
})
</script>

<template>
    <div class="Box">
        <swiper
                :modules="modules"
                :loop="true"
                :slides-per-view="1"
                :space-between="50"
                :autoplay="{ delay: 2000, disableOnInteraction: false }"
                :navigation="navigation"
                :pagination="{ clickable: true }"
                class="swiperBox"
        >
            <swiper-slide v-for="(item,index) in imgUrl" :key="index" class="swiper"><img :src="item.imgUrl" class="Swiperimg"></swiper-slide>

            <div class="swiper-button-prev"/>
            <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
            <div class="swiper-button-next"/>
            <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
        </swiper>
    </div>
</template>

<style scoped>
.Box {
    border-radius: 10px;
    width: 1000px;
    height: 400px;
    margin: 50px auto;
  overflow: hidden;


}
.swiperBox {
   height: 100%;
    width: 100%;
}
.swiper{
    height: 100%;
    width: 100%;
}
.Swiperimg{
    width: 100%;
    height: 100%;
}
/deep/.swiper-pagination-bullet{
    width: 16px;
    height: 16px;
}
/deep/.swiper-button-prev,.swiper-button-next{
    color: white;

}
</style>